<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/iron-icons/av-icons.html">
<link rel="import" href="../../bower_components/paper-styles/color.html">
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">


<dom-module id="control-simulation-buttons">
    <template>
        <style is="custom-style">
            :host {
                display: block;
            }

            paper-icon-button {
                width: 50px;
                height: 50px;
                margin:0;
                padding: 2px;
                border:2px;
                border-color: black;
                border-radius: 100%;
            }
            paper-icon-button[disabled] {

                color: #4b4f4c;
            }

            paper-spinner {
                width: 40px;
                height: 40px;
                margin:0;
                padding: 2px;
                border:2px;
                --paper-spinner-layer-1-color: black;
                --paper-spinner-layer-2-color: black;
                --paper-spinner-layer-3-color: black;
                --paper-spinner-layer-4-color: black;
            }
            .hidden_spinner{
                display: none;
            }

            .button{
                width: auto;
            }

        </style>
        <div class="layout horizontal center-justified button">
            <paper-icon-button id="play" title="play" on-click="showButton" icon="av:play-circle-filled" ></paper-icon-button>
            <paper-spinner id="play_spinner" class="hidden_spinner" alt="Loading...."></paper-spinner>
            <paper-icon-button disabled id="pause" title="pause" on-click="showButton" icon="av:pause-circle-outline"></paper-icon-button>
            <paper-spinner id="pause_spinner" class="hidden_spinner" alt="Loading...."></paper-spinner>
            <paper-icon-button disabled id="stop" title="stop" on-click="showButton" icon="av:stop"></paper-icon-button>
            <paper-spinner id="stop_spinner" class="hidden_spinner" alt="Loading...."></paper-spinner>
        </div>
    </template>
</dom-module>

<script>
    Polymer({
        is: 'control-simulation-buttons',
        behaviors: [
            Polymer.NeonSharedElementAnimatableBehavior
        ],

        properties: {
            simID:{
                type:String
            },
            status:{
                type:String,
                observer:'_display_button'
            }
        },

        /*listeners: {
            'opComplete':'_disable_spinner'
        },*/

        _getId: function(status) {
            newStatus = status.toLowerCase();
            switch (newStatus) {
                case "started":
                    return "play";

                case "finished":
                    return "stop";

                case "paused":
                    return "pause";
                default :
                    return "";
                    break;
            }
        },

        _enable_button: function(id){

            this._disable_spinner(id+"_spinner");
            switch (id) {
                case "pause":
                    this.$.play.disabled = false;
                    this.$.stop.disabled = false;
                    this.$.pause.disabled = true;
                    break;
                case "stop":
                    this.$.play.disabled = true;
                    this.$.pause.disabled = true;
                    this.$.stop.disabled = true;
                    break;
                case "play":
                    this.$.stop.disabled = false;
                    this.$.pause.disabled = false;
                    this.$.play.disabled = true;
                    break;
            }
        },

        _display_button: function(newValue, oldValue) {
            var id = this._getId(newValue);
            if(id){
                this._enable_button(id);
            }
        },

        _disable_spinner: function(id){
            switch (id) {
                case "pause_spinner":
                    $("#pause").show();
                    this.$.pause_spinner.active = false;
                    $("#pause_spinner").hide();
                    break;
                case "stop_spinner":
                    $("#stop").show();
                    this.$.stop_spinner.active = false;
                    $("#stop_spinner").hide();
                    break;
                case "play_spinner":
                    $("#play").show();
                    this.$.play_spinner.active = false;
                    $("#play_spinner").hide();
                    break;
            }
        },

        _load_spinner: function(id){

            this.$.play.disabled = true;
            this.$.stop.disabled = true;
            this.$.pause.disabled = true;

            switch (id) {

                case "pause_spinner":
                    $("#pause").hide();
                    this.$.pause_spinner.active = true;
                    $("#pause_spinner").show();
                    break;
                case "stop_spinner":
                    $("#stop").hide();
                    this.$.stop_spinner.active = true;
                    $("#stop_spinner").show();
                    break;
                case "play_spinner":
                    $("#play").hide();
                    this.$.play_spinner.active = true;
                    $("#play_spinner").show();
                    break;
            }

        },
        showButton: function (event) {

            var button = event.target.parentElement;
            var id = button.id;

            prev = button.parentElement;
            this._load_spinner(id+"_spinner");
            //this._enable_button(id);

            if (id) {
                //console.log(event.target.parentElement);
                event.target.parentElement.disabled = true;
                this.fire('submit-sim', {
                    tile: prev,
                    data: "" + id
                });
            }
        }



    });
</script>